<script setup>

import {computed, reactive, ref, watch, watchEffect} from "vue";

let name = "Base";

//对象数据
// let car = {
//   brand: "奔驰",
//   price: 7777
// }

let car = reactive({
  brand: "奔驰",
  price: 7777
})

// 指令
let msg = "<p style='color:red'>你好</p>"

function buy() {
  alert("购买成功。。。")
}

let fruits = ["苹果", "香蕉", "梨"]

// 响应式
let url = ref("https://www.baidu.com")

function changeUrl() {
  // url = "https://www.atguigu.com"
  console.log(url)
  url.value = "https://www.atguigu.com"
}

function addPrice(){
  car.price += 100
}

const num = ref(1);

const totalPrice = computed(()=> car.price * num.value);

// watch(num,(value,oldValue,onCleanup)=>{
//
//   console.log(value)
//   console.log(oldValue);
// })

watchEffect(()=>{
  if(num.value>3){
    console.log("超出");
    num.value = 3;
  }
})



</script>

<template>

  <!--  <a v-bind:href="url">go !</a>-->
  <a :href="url" :abc="url">go !{{ url }}</a>
  <button @click="changeUrl">改变地址</button>
  <button @click="addNum">加量</button>

<!--  <h2>姓名：{{ name }}</h2>-->

  <h2>品牌：{{ car.brand }}</h2>
  <h2>品牌：{{ car.price }}</h2>
  <h2>数量：{{ num }}</h2>

  <div v-html="msg"></div>

  <button v-on:click="buy" >购买 {{totalPrice}}</button>
  <button @click="num++">加量</button>

  <span style="color: green" v-if="car.price < 1000">很便宜</span>
  <span style="color: red" v-if="car.price > 1000">太贵了</span>

  <!--  <li v-for="f in fruits">{{f}}</li>-->
<!--  <li v-for="(f,i) in fruits">{{ f }},{{ i }}</li>-->

  <button @click="addPrice">加价</button>

</template>

<style scoped>

</style>